import React, { useEffect } from 'react'
import { Button, Form, Input, Card, message } from 'antd';
import { useNavigate, useParams } from 'react-router-dom';
import style from '../index.module.css'

import {
  addHospitalRequest,        //添加医院请求
  getHosSetFromIDRequest,    //根据id获取医院信息请求
  upDateHospitalRequest,     //修改医院请求
} from "@api/hospital/hospitalSet"

//添加医院请求的参数类型
import type { addHospitalParamType } from "@api/hospital/model/hospitalSetTypes"
import { transform } from 'typescript';


export default function AddOrUpdateHosSet() {
  //使用编程式陆游导航跳转路由
  const usenavigate = useNavigate()

  //拿到当前路由的id , 根据id发送请求拿到对应的数据渲染在页面
  const { id } = useParams()


  //通过Form组件上的useForm方法,创建实例,然后在某个Form组件上添加form属性,值为当前实例,那么Form表单和当前的form实例就关联起来了
  const [form] = Form.useForm()


  useEffect(() => {
    //如果是修改医院路由,那么在初始化的时候就先发送请求获取数据添加到表单中
    if (id) {
      const getHosListData = async () => {
        //如果有id发送请求
        const result = await getHosSetFromIDRequest(id)

        //Form实例上有一个setFieldsValue方法,可以把一个对象的值通过key和表单的name一一对应的形式添加到表单里
        form.setFieldsValue(result)

      }
      getHosListData()
    }
  }, [])


  //1.点击保存的回调函数  如果有id就修改医院没有就添加医院
  const addHospitalHandle = async (fieldValue: addHospitalParamType) => {
    if (id) {
      //修改医院
      await upDateHospitalRequest({
        ...fieldValue,
        id
      })

      //修改医院成功的提示
      message.success("修改医院成功!")


    }else{
      //添加医院
      await addHospitalRequest(fieldValue)

      //添加医院成功的提示
      message.success("添加医院成功!")

    }

    //添加成功后回到设置页面
    usenavigate("/syt/hospatil/hospatilSet")
  }


  //2.点击返回的回调函数
  const goBackHospitalSet = () => {
    //回到医院设置页面
    usenavigate(-1)
  }


  return (
    <Card>
      <Form
        form={form}
        name="basic"
        labelCol={{ span: 2 }}     //表单的label的宽度
        wrapperCol={{ span: 20 }}  //表单的input的宽度
        onFinish={addHospitalHandle}
      >
        <Form.Item
          label="医院名称"
          name="hosname"
          rules={[{ 
            required: true,              //必填
            message: '请输入api基础路径', //提示信息
            transform(value) {
              return value.trim()  //将字段值转换成目标值后进行校验
            }
          }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="医院编号"
          name="hoscode"
          rules={[{
            required: true,             //必填
            message:  "请输入医院名称",  //提示信息
            transform(value){           //去空格
              return value.trim()      
              
            }
          }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="api基础路径"
          name="apiUrl"
          rules={[{
            required: true,             //必填
            message:  "请输入医院名称",  //提示信息
            transform(value){           //去空格
              return value.trim()      
              
            }
          }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="联系人姓名"
          name="contactsName"
          rules={[{
            required: true,             //必填
            message:  "请输入医院名称",  //提示信息
            transform(value){           //去空格
              return value.trim()      
              
            }
          }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="联系人手机"
          name="contactsPhone"
          rules={[{
            required: true,             //必填
            message:  "请输入医院名称",  //提示信息
            transform(value){           //去空格
              return value.trim()      
              
            }
          }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          wrapperCol={{ offset: 2 }}
        >
          <Button type="primary" htmlType="submit" className={style.mr}>
            提交
          </Button>
          {/* 点击返回的函数 */}
          <Button type="default" htmlType="button" onClick={goBackHospitalSet}>
            返回
          </Button>
        </Form.Item>

      </Form>
    </Card>
  )
}

